<template>
  <!-- 问题分类页面 -->
  <div class="brief-answer w100">
    <!-- 类型说明 -->
    <QuestionType :msg="state.title" />
    <!-- 分割线 -->
    <Line />
    <!-- 描述信息 -->
    <QuestionDescribe :msg="state.describe" />
    <!-- 问题列表 -->
    <QuestionItemShow
      :type="state.type"
      :list="state.list"
      @question-item="fnQuestionAnswer"
    />
  </div>
</template>

<script>
import { reactive, watch } from "vue";
import QuestionType from "../../Text/QuestionType/QuestionType.vue";
import Line from "../Line/Line.vue";
import QuestionDescribe from "../../Text/QuestionDescribe/QuestionDescribe.vue";
import QuestionItemShow from "../QuestionItem/QuestionItemShow.vue";

export default {
  // 子组件
  components: {
    QuestionType,
    Line,
    QuestionDescribe,
    QuestionItemShow,
  },
  // 父组件传值
  props: {
    msg: Object,
  },
  // 事件抛出组
  emits: ["answer-all"],
  setup(props, { emit }) {
    // 双向绑定数据
    const state = reactive({
      answreCollection: {},
      type: props.msg.type,
      list: props.msg.questionItem,
      title: props.msg.questinoType,
      describe: props.msg.questionDescribe,
    });
    // 回传父组件
    const fnQuestionAnswer = (val) => {
      state.answreCollection = Object.assign(state.answreCollection, val);
      emit("answer-all", state.answreCollection);
    };
    // 监听父组件传值
    watch(
      () => props.msg,
      (newVal) => {
        state.type = newVal.type;
        state.list = newVal.questionItem;
        state.title = newVal.questinoType;
        state.describe = newVal.questionDescribe;
      }
    );
    // 传入模板
    return {
      state,
      fnQuestionAnswer,
    };
  },
};
</script>

<style scoped>
.brief-answer {
  padding-top: 40px;
}
</style>
